<script setup>
import {
  useFlagStore,
  useI18nStore,
  useFileStore,
  useToastStore
} from '@/stores';
import { emailShareFile } from '@/apis/file';
const toastStore = useToastStore();
const flagStore = useFlagStore();
const i18nStore = useI18nStore();
const fileStore = useFileStore();
const email = ref('');
const submitAdd = () => {
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!email.value || !emailPattern.test(email.value)) {
    toastStore.showToast({
      severity: 'error',
      summary: i18nStore.translate('请输入正确的邮箱格式'),
      detail: '',
      life: 2000,
      group: 'upload_success'
    });
    return;
  }
  emailShareFile({
    email: email.value,
    link: createShareLink(
      fileStore.curFileInfo.shareId,
      fileStore.curFileInfo.isSmall
    )
  });

  flagStore.setEmailVisible(false);
};

const createShareLink = (shareId, Small) => {
  const id = btoa(`${shareId}`);
  const isSmall = btoa(`${Small}`);
  return `https://okpan.fun/share/${id}/post/${isSmall}`;
};
</script>

<template>
  <div>
    <Dialog
      v-model:visible="flagStore.emailVisible"
      modal
      :header="i18nStore.translate('share_file_by_email')"
      :style="{ width: '35rem' }"
    >
      <div
        class="absolute top-16 bottom-24 left-0 right-0 h-auto overflow-auto px-6 md:relative md:top-0 md:bottom-0 !overflow-initial"
      >
        <!-- 文件信息 -->
        <div
          spellcheck="false"
          class="flex select-none items-center rounded-xl mb-5"
        >
          <div class="relative w-16 shrink-0">
            <div
              v-if="fileStore.curFileInfo.type === 'folder'"
              class="svg-color-theme"
            >
              <SvgIcon
                name="folder"
                :style="{ width: '53px', height: '52px' }"
                iconClass="svg-color-theme"
              />
            </div>
            <div
              v-else-if="fileStore.curFileInfo.type === 'image'"
              class="relative w-16 shrink-0"
            >
              <img
                :src="fileStore.curFileInfo.url"
                alt=""
                loading="lazy"
                class="ml-0.5 h-12 w-12 rounded object-cover"
              />
            </div>

            <div v-else class="flex items-center justify-center pr-2">
              <span
                class="absolute z-[5] mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center text-[9px] font-semibold text-theme-color"
              >
                {{ fileStore.curFileInfo.type }}
              </span>
              <SvgIcon
                name="file"
                svgClass="vue-feather dark:text-gray-800 text-gray-100 "
                :style="{ width: '38px', height: '51px' }"
                iconClass="svg-color-theme"
              />
            </div>
          </div>
          <div class="pl-2">
            <span
              :title="fileStore.curFileInfo.name"
              contenteditable="false"
              class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold hover:underline"
              style="max-width: 240px"
            >
              {{ fileStore.curFileInfo.name }}
            </span>
            <div class="flex items-center">
              <small class="block text-xs text-gray-500 dark:text-gray-500">
                <i class="pi pi-link vue-feather text-theme-color text-xs" />
                <span>{{ fileStore.curFileInfo.size }}</span>
                {{ i18nStore.translate('date', fileStore.curFileInfo.times) }}
              </small>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col gap-3 mb-3">
        <label for="username" class="font-semibold w-6rem">{{
          i18nStore.translate('please_enter_email_address')
        }}</label>
        <InputText
          id="username"
          class="flex-auto h-10 font-semibold w-6rem text-xl px-3"
          :placeholder="
            i18nStore.translate('please_enter_email_address_to_share')
          "
          v-model="email"
        />
      </div>
      <!-- 提交按钮 -->
      <div
        class="absolute bottom-0 left-0 right-0 flex items-center space-x-4 px-6 py-4 pb-6 md:relative"
      >
        <button
          @click="flagStore.setEmailVisible(false)"
          type="button"
          class="button-base w-full secondary hover:opacity-70 hover:scale-110"
        >
          <div class="content dark:text-[#00e1ff]">
            {{ i18nStore.translate('cancel') }}
          </div>
        </button>
        <button
          type="button"
          class="button-base w-full theme hover:opacity-70 hover:scale-110"
          @click="submitAdd"
        >
          <div class="content dark:">
            {{ i18nStore.translate('send') }}
          </div>
        </button>
      </div>
    </Dialog>
  </div>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
